<template>
  <div class="hello">
    <div class="maintop">
      <img alt="Vue logo" src="../assets/logo.png" />
      <p>welcome {{ name }}</p>
      <p @click="exit" class="exit">退出</p>
    </div>
    <div class="main">
      <main-left></main-left>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import mainLeft from '../views/main-left.vue'
export default {
  name: "HelloWorld",
  data() {
    return {
      name: "你好",
    };
  },
  components:{
    mainLeft,
  },
  methods:{
    exit(){
      this.$store.commit('changeLogin',false);
      this.$router.push("/login");
    },
  },
  mounted(){
    this.name = this.$route.params.id;
  }
};
</script>
<style scoped lang="scss">
.maintop{
  width: 100vw;
  height: 80px;
  background-color: rgb(77, 75, 75);
  display: flex;
  justify-content: space-between;
  color: white;
  line-height: 40px;
  img {
    width: 70px;
    height: 70px;
    margin-left: 20px;
  }
  p{
    margin-right: 20px;
  }
}
.main{
  width: 100vw;
  display: flex;
}
.exit{
  cursor: pointer;
}
</style>
